<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 理想视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>京东-33</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- https://uksir.gitee.io/docs/Home/youdao.html -->
  <!-- 京东的头部 -->
  <header>
    <a href="#" class="logo"><i></i></a>
    <div class="search"> <input placeholder="100万件超级爆品疯抢" type="text"> </div>
    <a href="#" class="login">登录</a>
  </header>

  <!-- 轮播图 -->
  <div class="slides">
    <ul>
      <li> <a href="#"> <img src="./uploads/l1.jpg" alt=""> </a> </li>
      <!-- <li> <a href="#"> <img src="./uploads/l1.jpg" alt=""> </a> </li> -->
    </ul>
  </div>

  <!-- 导航 -->
  <nav>
    <!-- (a[href="#"]>img[src="./images/nav_$.png"]+p{京东超市})*8 -->
    <a href="#">
      <img src="./images/nav_1.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_2.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_3.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_4.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_5.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_6.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_7.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_8.png" alt="">
      <p>京东超市</p>
    </a>
  </nav>
</body>
</html>